<template>
  <view class="trade-depth-chart">
    <view
      id="depth-chart"
      :prop="options"
      :change:prop="depth.updateData"
    ></view>
  </view>
</template>

<script module="depth" lang="renderjs">
// import store from '@/store/index.js';
import i18n from "@/language/index.js";
import DepthChart from "./chart.js";
let depth = undefined

export default {
  data() {
    return {}
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      const options = {
        buy: {
          tooltip: {
            show: true,
            text: i18n.t("tradeDepth.labels[4]")
            // text: "買盤"
          },
        },
        sell: {
          tooltip: {
            show: true,
            text: i18n.t("tradeDepth.labels[5]")
            // text: "賣盤"
          },
        },
        // yAxis: {
        //   tooltip: {
        //     color: store.state.theme === "dark" ? "#fff" : "#000",
        //   }
        // },
        // xAxis: {
        //   tooltip: {
        //     color: store.state.theme === "dark" ? "#fff" : "#000",
        //   }
        // },
      }
      depth = new DepthChart(options);
      depth.init("depth-chart")
    },
    updateData(options) {
      if (options.type === 1) {
        depth.setData(options.series)
      }
    }
  }
}
</script>

<script>
export default {
  name: "TradeDepthChart",
  props: {
    list: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      options: {
        type: 1,
        series: [],
      },
    };
  },
  mounted() {
    if (this.list.length > 0) {
      this.setUpdate();
    }
  },
  watch: {
    list() {
      this.setUpdate();
    },
  },
  methods: {
    setUpdate() {
      // Buy
      const renderData = {
        buy: [],
        sell: [],
      };
      for (let row of this.list) {
        row[0].total = row[0].sum;
        row[1].total = row[1].sum;
        renderData.buy.push(row[0]);
        renderData.sell.push(row[1]);
      }
      renderData.sell.reverse();
      this.options = {
        type: 1,
        series: renderData,
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.trade-depth-chart {
  width: 100%;
  height: 100%;
  position: relative;
  #depth-chart {
    width: 100%;
    height: 100%;
    // height: 400rpx;
  }
}
</style>
